<template>
  <div class="app-container">
        <dk-query
          ref="nxIB"
          :searchForm="queryParams"
          :inputList="inputList"
          :queryTable="click().handleQuery"
          labelWidth="110"
        >
        </dk-query>
        <dk-table
          ref="table"
          :column="column"
          :pagination="paginationObjs"
          :tableData="tableData"
          :height="tableHeight"
        >
        </dk-table>
  </div>
</template>

<script>
// 接口api：first step
import {
  freightTemplateList,
  freightTemplateDelete,
} from '@/api/list/freight-template.js';
// import { getfreightList,delFreight } from "@/api/merchant-order-manage/freight-fee-model.js";
export default {
  data() {
    return {
      loading: true,
      // 规程toolbar：two step
      inputList: [
        {
          type: "input",
          placeholder: "请输入",
          label: "模版名称",
          name: "templateName",
        },

        {
          type: "common-button",
          isShowAdd: true,
          hasPermissObj: {
            add: () => `${this.urlObject.permissPrefix}add`,
          },
          searchFun: (searchForm) => {
            this.queryParams = searchForm;
            this.click().handleQuery();
          },
          resetFun: () => {
            this.click().resetQuery();
          },
          addFun: () => {
            this.click().handleAdd();
          },
        },
      ],
      // 规程表头：shree step
      column: [
        {
          value: "templateName",
          name: "模板名称",
        },
        {
          value: "billingMethod",
          name: "计费方式",
          stateList:[
            {
              value: 0,
              name: "件数"
            },
            {
              value: 1,
              name: "重量"
            }
          ]
        },
        {
          value: "first",
          name: "首件/重（个/KG）",
        },
        {
          value: "firstFee",
          name: "运费（元）",
        },
        {
          value: "second",
          name: "续件/重（元/KG）",
        },
        {
          value: "secondFee",
          name: "续费（元）",
        },

        {
          width: 320,
          value: "id",
          name: "管理",
          fixed: "right",
          type: "button",
          buttonList: [
            {
              type: "no-tooltip",
              name: "编辑",
              fun: (row) => {
                this.click().handleUpdate(row);
              },
              showFun:(row)=>{
                return row.brandId != '0'
              },
              color: "text",
              icon: "el-icon-edit",
              hasPermiss: () => `${this.urlObject.permissPrefix}edit`,
            },
            {
              type: "no-tooltip",
              name: "删除",
              fun: (row) => {
                this.click().handleDelete(row);
              },
              showFun:(row)=>{
                return row.brandId != '0'
              },
              color: "text",
              icon: "el-icon-edit",
              hasPermiss: () => `${this.urlObject.permissPrefix}del`,
            },
          ],
        },
      ],
      // 分页器
      paginationObjs: {
        paginationChange: function () {
          this.network().getList(false);
        }.bind(this),
        page: 1,
        limit: 10,
        total: 0,
        loading: false,
      },
      // 查询参数
      queryParams: {},
      // 表格数据
      tableData: [
      
      ],
      // url对象：four step
      urlObject: {
        permissPrefix: "merchant-order-manage:freight-fee-model:",
        routePathPrefix: "/merchant-order-manage/FreightFeeModel/",
      },
      // 接口存储对象：five step
      interfaceObj: {
        getApiName: freightTemplateList,
        delApiName:freightTemplateDelete,
      },
    
    };
  },

  created() {
    this.network().getList();
    this.getTableHeight.call(this);
  },
  methods: {
    // fun(data) {
    //   if (this.formList.length <= 3) {
    //     return;
    //   }
    //   delete this.form[data.name];
    //   this.formList = this.formList.filter((item) => item.name !== data.name);
    //   console.log(this.formList);
    // },
    click() {
      return {
        // 搜索
        handleQuery: async () => {
          this.paginationObjs.page = 1;
          this.network().getList();
        },
        // 重置
        resetQuery: async () => {
          this.queryParams = this.$options.data().queryParams;
          this.paginationObjs = this.$options.data().paginationObjs;
          this.network().getList();
        },
        // 详情
        handleDetail: async (row) => {
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}detail/${row.id}`,
          });
        },
        // 新增
        handleAdd: async () => {
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}edit`,
          });
        },
        // 编辑
        handleUpdate: async (row) => {
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}edit/${row.id}`,
          });
        },
        // 删除
        handleDelete: async (row) => {
          console.log(row);
          this.deleteMessageBox({
            name: `模版名称：${row.templateName || ""}`,
            message: "是否确认删除该模版？",
          }).then(() => {
            this.network().handleDelete(row.id);
          });
        },
      };
    },
    network() {
      return {
        getList: async () => {
          const params = this.deepCopy(this.queryParams);
          delete params.dateRange;
          const obj = {
            ...params,
            pageNum: this.paginationObjs.page,
            pageSize: this.paginationObjs.limit,
            beginTime: this.queryParams.dateRange?.[0],
            afterTime: this.queryParams.dateRange?.[1],
          };
          this.paginationObjs.loading = true;
          try {
            const { getApiName } = this.interfaceObj;
            const data = await getApiName(obj);
            this.paginationObjs.loading = false;
            this.tableData = data.rows;
            this.paginationObjs.total = data.total;
          } catch (error) {
            this.paginationObjs.loading = false;
          }
        },
        handleDelete: async (id) => {
          const { delApiName } = this.interfaceObj;
          const { code } = await delApiName(id);
          if (code === 0) {
            this.$modal.msgSuccess("删除成功");
          }
          this.network().getList();
        },
      };
    },
    submit() {
      const throttleStatus = this.throttle(); // 节流
      if (!throttleStatus) return;
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            this.network().editForm();
          } else {
            this.network().addForm();
          }
        }
      });
    },
    
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-message-box__title span {
  position: relative;
  left: 37px !important;
}

::v-deep.el-input {
  width: 520px;
}
</style>